﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css" />
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

    <style>
        /** 隐藏树形表格的图标*/

        .treeTable-icon .layui-icon-layer {
            display: none;
        }
    </style>
</head>

<body>
    <table id="data_table" class="layui-hide" lay-filter="data_table"></table>

    <script type="text/html" id="toolberLeft">
        <div class="layui-form">
            <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="expand" style="margin-left: 5px;" title="展开"><i class="layui-icon">&#xe624;</i></a>
            <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="fold" style="margin-left: 5px;" title="折叠"><i class="layui-icon">&#xe67e;</i></a>
            <div class="layui-input-inline">
                <input type="text" name="name" class="layui-input" id="serarch_name" style="height: 33px;" placeholder="请输入名称关键字">
            </div>
            <div class="layui-inline" style="text-align: center;">
                <a class="layui-btn layui-btn-sm" lay-event="search" style="margin-left: 5px;"><i class="layui-icon">&#xe615;</i>搜索</a>
            </div>
            <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add" style="margin-left: 5px;"><i class="layui-icon">&#xe654;</i>新增</a>
        </div>
    </script>

    <script type="text/html" id="toolRow">
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="add">添加下降菜单</a>
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>

</body>
<script>
		layui.config({
			base: "model/"
		}).extend({
			treeSelect: "treeSelect",
			treeTable: "treeTable",
		});

		var layer;
		var form;
		var table;
		var treeTable;
		var interUrl = {
			select: 'js/data.json',
		}
		/**
		 * layui 组件引入
		 * 
		 */
		layui.use(['layer', 'form', 'table', "treeTable"], function() {
			layer = layui.layer;
			form = layui.form;
			table = layui.table;
			treeTable = layui.treeTable;
			var jsonData = [{
					"mid": 1,
					"parentId": 0,
					"mname": "菜单名称1",
					"url": "test/select1"
				},
				{
					"mid": 11,
					"parentId": 1,
					"mname": "菜单名称1-1",
					"url": "test/select11"
				},
				{
					"mid": 2,
					"parentId": 0,
					"mname": "菜单名称2",
					"url": "test/select2"
				},
				{
					"mid": 3,
					"parentId": 0,
					"mname": "菜单名称3",
					"url": "test/select3"
				}
			];

			// 执行一个 table 实例
			var treeTablParam = treeTable.render({
				elem: '#data_table',
				id: 'data_table',
				//url : interUrl.select,
				data: jsonData,
				height: 'full-120',
				page: false,
				toolbar: '#toolberLeft',
				treeColIndex: 1, // 树形图标显示在第几列
				treeSpid: 0, // 最上级的父级id
				treeIdName: 'mid', // id字段的名称
				treePidName: 'parentId', // pid字段的名称
				treeDefaultClose: false, // 是否默认折叠
				treeLinkage: true, // 父级展开时是否自动展开所有子级
				cols: [
					[ // 表头
						{
							type: 'checkbox',
							fixed: 'left',
							hide: true
						},
						{
							field: 'mname',
							title: '菜单名称',
							align: 'center',
							width: '150'
						},
						{
							field: 'mid',
							title: 'ID',
							align: 'center',
							width: '80',
							hide: true
						},
						{
							field: 'url',
							title: '跳转路径',
							align: 'center',
							width: '300'
						},
						{
							title: '操作',
							align: 'center',
							width: '300',
							toolbar: '#toolRow'
						}
						// fixed : 'right',
					]
				]
			});

			// 头部左侧事件
			table.on('toolbar(data_table)', function(obj) {
				if(obj.event === 'search') {
					select();
					// treeTablParam = treeTable.render(treeTablParam); // 重载
				} else if(obj.event === 'add') {

				} else if(obj.event === 'expand') {
					treeTable.expandAll('#data_table');
				} else if(obj.event === 'fold') {
					treeTable.foldAll('#data_table');
				}
			})

			// 监听行工具事件
			table.on('tool(data_table)', function(obj) {
				var data = obj.data;
				if(obj.event === 'add') {

				} else if(obj.event === 'del') {

				} else if(obj.event === 'edit') {

				} else if(obj.event === 'detail') {

				}
			});

		})

		function select() {
			var name = $("#serarch_name").val();
			var searchCount = 0;
			if(name) {
				$('.layui-table').find('tbody tr td').each(function() {
					$(this).css('background-color', 'transparent');
					var text = $(this).text();
					if(text.indexOf(name) != -1) {
						$(this).css('background-color', '#e0f1c5');
						searchCount++;
					}
				});
				if(searchCount == 0) {
					layer.msg("无匹配");
				}
			} else {
				layer.msg("请输入搜索内容");
			}
		}
</script>

</html>